<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>模板消息</title>
    <style>
        .qrcode {
            padding: 5px;
            background: #f4f4f4;
            border: 1px solid #dddddd;
            cursor: pointer;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-row>
                <el-col :span="6" style="margin-right: 10px;">
                    <el-input v-model="keyword" placeholder="昵称丶原始ID">
                        <el-button @click="get_list()" slot="append">搜索</el-button>
                    </el-input>
                </el-col>
                <el-col :span="15">
                    <el-select v-model="category_1st_id" filterable placeholder="一级分类" @change="category_1st_change">
                        <el-option v-for="category in category_1st_list" :key="category.id" :value="category.id"
                                   :label="category.categoryname"></el-option>
                    </el-select>
                    <el-select v-model="category_2nd_id" filterable placeholder="二级分类" @change="category_2nd_change">
                        <el-option v-for="category in category_2nd_list" :key="category.id" :value="category.id"
                                   :label="category.categoryname"></el-option>
                    </el-select>
                    <el-button @click="refresh()" type="success" icon="el-icon-refresh"></el-button>
                    <el-button @click="to_preauth()" type="warning">授权公众号</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-table :data="table_data" border stripe style="margin-top: 10px;">
                    <el-table-column prop="id" label="id" width="50"></el-table-column>
                    <el-table-column prop="name" label="账号昵称" width="200"></el-table-column>
                    <el-table-column prop="ghid" label="原始id" width="200">
                        <template slot-scope="scope">
                            {{scope.row.ghid}}<i @click="to_qrcode(scope.row.ghid)" class="fa fa-qrcode qrcode"></i>
                        </template>
                    </el-table-column>
                    <el-table-column prop="appid" label="APPID" width="180"></el-table-column>
                    <el-table-column prop="category" label="一级分类" width="80"></el-table-column>
                    <el-table-column prop="category2" label="二级分类" width="80"></el-table-column>
                    <el-table-column prop="operation" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" @click="set_temp(scope.row.appid)">配置模板</el-button>
                            <el-button size="small" type="success" @click="send_temp(scope.row.appid)">发送</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            turl: '{$turl}', // 授权地址
            keyword: '', // 搜索关键字
            table_data: [], // 表格数据
            category_1st_id: '', // 一级分类id
            category_2nd_id: '', // 二级分类id
            category_1st_list: [], // 所有一级分类
            category_2nd_list: [], // 属于一级分类的二级分类
        },
        methods: {
            // 打开授权页面
            to_preauth() {
                layerWindow('授权公众号', this.turl, '50%', '75%');
            },
            // 打开二维码页面
            to_qrcode(ghid) {
                layerWindow('二维码', 'https://open.weixin.qq.com/qr/code?username=' + ghid, '35%', '55%');
            },
            // 刷新表格数据
            refresh() {
                this.keyword = '';
                this.category_1st_id = '', // 一级分类id
                this.category_2nd_id = '', // 二级分类id
                this.get_list();
            },
            // 一级分类选择
            category_1st_change(val) {
                this.get_category(val);
                this.category_1st_id = val;
                this.get_list();
            },
            // 二级分类选择
            category_2nd_change(val) {
                this.category_2nd_id = val;
                this.get_list();
            },
            // 获取分类
            get_category(pid = 0) {
                var that = this;
                $.ajax({
                    type: 'post',
                    cache: false,
                    url: '{:url("template/get_category")}',
                    data: {pid: pid},
                    success: function (res) {
                        if (pid != 0) {
                            that.category_2nd_list = res;
                        } else {
                            that.category_1st_list = res;
                        }
                    },
                    error: function () {
                        this.$message.error('获取分类失败,请刷新重试!');
                    }
                });
            },
            // 获取表格数据
            get_list() {
                var that = this;
                $.ajax({
                    type: 'post',
                    cache: false,
                    url: '{:url("template/get_authorizer_list")}',
                    data: {keyword: that.keyword, category: that.category_1st_id, category2: that.category_2nd_id},
                    success: function (data) {
                        if (data) {
                            that.table_data = data;
                        }
                    },
                    error: function () {
                        that.$message.error("发生系统错误,请与管理员联系！");
                    }
                });
            },
            // 配置模板消息
            set_temp(appid) {
                url = "{:url('template/set_temp_view')}" + "?appid=" + appid;
                layerWindow('设置模板消息', url, '70%', '90%');
            },
            // 发送模板消息
            send_temp(appid) {
                console.log('send_temp');
            },
        }
    });
    vm.get_category();
    vm.get_list();
</script>
</html>